<!--我的界面-->
<template>
  <scroller class="all bg1" @viewappear="viewappear">
    <div>
    
      <!--测试-->
      <div class="test" @click="testClick">
        <text class="font30 text2">{{isTest ? '测试' : ''}}</text>
      </div>

      <!--信息-->
      <div class="info">

        <div class="row acenter" @click="infoClick">

          <div class="img-tx">
            <LImage class="img-tx absolute" :src="Config.img('touxiang.png')"></LImage>
            <LImage class="img-tx" v-if="info&&info.avatar" :src="info.avatar"></LImage>
          </div>
          
          <div class="width30"></div>
          <div v-if="Config.isLogin">
            <text class="font36 text2">{{(info&&info.nickName) ? info.nickName : '--'}}</text>
            
            <div class="row acenter" @click="uidClick()">
              <text class="font24 text3">{{'UID：'+ ((info&&info.uuid) ? info.uuid : '--')}}</text>
              <div class="copy main1">
                <text class="font18 text1">{{T('复制')}}</text>
              </div>
            </div>
          </div>
          <text v-else class="font36 text1">{{T('登录/注册')}}</text>
        </div>

        <div class="all"></div>
        <div class="sign bg2 bk3" @click="signClick">
          <text class="font28 text3" v-if="sign">{{T('今日已签')}}</text>
          <template  v-else>
            <LImage class="img-sign" :src="Config.img('my_qiandao.png')"></LImage>
            <text class="font28 text2">{{T('签到')}}</text>
          </template>
        </div>
      </div>

      <!--会员-->
      <template>
        <div class="vip color-qbhui" v-if="isVip">
          <LImage class="img-vip" :src="Config.img('VIP.png')"></LImage>
          
          <div class="all">
            <text class="font26 color-hui">{{' '}}</text>
            <div class="height10"></div>
            <text class="font26 color-hui all">{{T("有效期至") + vipTime}}</text>
          </div>
          <div class="but-buy color-bhui" @click="vipClick">
            <text class="font26 text1">{{T('立即续费')}}</text>
          </div>
        </div>
        <div class="vip color-qblan" v-else>
          <LImage class="img-vip" :src="Config.img('putong.png')"></LImage>
          <div class="all">
            <text class="font26 color-lan">{{T('普通用户')}}</text>
            <text class="font28 main-t1 all">{{T('加入VIP，享受会员才有的特权')}}</text>
          </div>
          <div class="but-buy main1" @click="vipClick">
            <text class="font26 text1">{{T('去开通')}}</text>
          </div>
        </div>
      </template>

      <!--菜单-->
      <div class="menu">
        <template v-for="(item, index) in menus">
          <div class="but-menu" v-bind:key="'menu'+index" @click="menuClick(item)"> 
              <div>
                <LImage class="img-menu" :src="Config.img(item.img)"></LImage>
                <div class="tag warning1" v-if="noticeNumber > 0 && item.tag"></div>
              </div>
              <text class="font24 text2">{{item.title}}</text>
          </div>
        </template>
      </div>
      
      <!--列表-->
      <template v-for="(item, index) in cells">
        <div class="cell bt1" v-bind:key="'cell'+index" @click="cellClick(item)"> 
          <LImage class="img-cell" :src="Config.img(item.img)"></LImage>
          <text class="font28 text2 all">{{item.title}}</text>
          <LImage class="img-arrow" :src="Config.img('jiantou_lan.png')"></LImage>
        </div>
      </template>
    </div>
  </scroller>
</template>

<script>

import jnavigator from "@/_js/navigator";
import jhttps from "@/_js/https";
import jconfig from "@/_js/config";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jtime from "@/_js/time";
import jdebug from "@/_js/debug";

const globalEvent = weex.requireModule('globalEvent');
const clipboard = weex.requireModule("clipboard");
const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  
  data() {
    return {
      T: T,
      Config: jconfig,
      index:0, //测试连续点击累计数量
      isTest:false, //true 测试环境

      sign:false, //签到状态
      noticeNumber:0, //未读消息数

      unit:undefined, //计价单位
      info:undefined, //用户信息
      isVip:false, //true 会员
      vipTime:undefined, //会员到期时间
      money:undefined, //总资产
      ratei:undefined, //人民币、美元汇率


      menus:[
        {'img':'wodelianghua.png', 'title':T('我的量化'), 'url':'follw/MFollwManInfox', 'navColor':'#0c0c0c', 'login':true},
        {'img':'v2_qianbao.png', 'title':T('我的钱包'), 'url':'wallet/Wallet', 'navColor':'#151a2a', 'login':true},
        {'img':'v2_yaoqing.png', 'title':T('邀请好友'), 'url':'invite/Invite', 'login':true},
        {'img':'v2_huodong.png', 'title':T('活动中心'), 'url':'mine/Activity', 'navColor':'#0c0c0c', 'login':true},
      ],

      cells:[
        {'img':'anquan.png', 'title':T("安全"), 'url':'mine/Security', 'login':true},
        {'img':'lianxi.png', 'title':T("联系我们"), 'url':'mine/Contract', 'login':false},
        {'img':'about.png', 'title':T("关于我们"), 'url':'mine/About', 'login':false},
        {'img':'share.png', 'title':T("分享Vtrading"), 'share':true, 'login':false},
        {'img':'shezhi.png', 'title':T("设置"), 'url':'mine/Set', 'login':false}
      ],
    };
  },

  created() {

    //计价单位
    weexFunction.getConfig("current_bz",(value)=>{

      this.unit = value == "USD"?"USD":"CNY";

      //人民币-美元汇率
      weexFunction.getConfig("usd_cny_ratei",(value)=>{
        this.ratei = value;
        this.httpUserInfo();
      });
    });
    
    //获取环境状态
    weexFunction.getEnvironment((isTest)=>{
       this.isTest = isTest;
    });
  },

  methods: {

    initData(data) {

      this.sign = data.sign; //签到状态
      this.noticeNumber = Number(data.noticeNumber) + Number(data.messageNumber); //未读消息数

      var info = data.account;
      this.isVip = info.member != 'LV0';
      this.vipTime = jtime.getTime(data.vipDeadline, 'y/M/d');

      //总资产
      var usdt = jmath.jia(info.usdtAmount, info.usdtIncomeAmount);
      usdt = jmath.jia(usdt, info.usdtDepositAmount);
      var vtn = jmath.jia(info.vtnAmount, info.vtnIncomeAmount);
      vtn = jmath.jia(vtn, info.vtnDepositAmount);
      var vtn_usdt = jmath.cheng(vtn, data.vtnUsdtRate);
      var money = jmath.jia(usdt, vtn_usdt);
      var ratei = this.unit == "CNY" ? this.ratei : '1';
      money = jmath.cheng(money, ratei); //CNY折合
      this.money = jmath.gfMoney(money, true);
      
      this.info = info;
    },

    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      this.httpUserInfo();
    },

    /********************************** HTTP*/
    //http用户信息
    httpUserInfo() {
      if(!jconfig.isLogin) return;
      
      var param = {};
      jhttps.postX("userV2/userDetail",param,true,(data) => {
        if (data.status == 200) {
          data = data.data;
          this.initData(data);
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    /********************************** 点击事件 */ 
    //个性设置
    setClick() {
      var nav = {'navColor':'#0c0c0c'};
      jnavigator.open('', "mine/Set", undefined, nav);
    },

    //登录
    loginClick(){
      jconfig.forceLogin();
    },
    
    //用户资料
    infoClick() {
      if (!jconfig.forceLogin())return;
      jnavigator.openNative("personalInfo");
    },

    //复制UID
    uidClick(uid) {

      if(this.info&&this.info.uuid) {
        clipboard.setString(this.info.uuid);
        jmodal.toast(T("复制成功"));
      }
    },

    //签到
    signClick() {
      if (!jconfig.forceLogin())return;
      jnavigator.openDialog("mine/Signin");
    },

    //会员
    vipClick() {
      if (!jconfig.forceLogin())return;
      var param = {'avatar': this.info.avatar}; //头像url
      var nav = {'navColor':'#1677fe'};
      jnavigator.open('', "mine/Vip", param, nav);
    },

    //菜单
    menuClick(item) {
      if (!jconfig.forceLogin())return;
      var nav = item.navColor ? {'navColor':item.navColor}: undefined;
      jnavigator.open(item.title, item.url, undefined, nav);
    },

    //列表点击
    cellClick(item) {
      if (item.login && !jconfig.forceLogin())return;

      if (item.share) {
        weexFunction.shareApp();
      } else if (item.native) {
        jnavigator.openNative(item.url);
      } else {
        var nav = {'navColor':'#0c0c0c'};
        jnavigator.open('', item.url, undefined, nav);
      }
    },

    //测试环境切换
    testClick() {
      
      this.index++;
      if(this.tapHandler){
        clearTimeout(this.tapHandler);
      }

      if(this.index>15){
        this.isTest = !this.isTest;
        weexFunction.setEnvironment(this.isTest);
        this.index = 0;
        return;
      }

      this.tapHandler = setTimeout(() => {
        this.index = 0;
      }, 1500);
    },
  },
};
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.absolute{
  position:absolute;
}
.line {
  height: 1px;
}

/************* 测试 */
.test {
  justify-content: center;
  height: 110px;
  padding-left: 30px;
}

/************* 信息 */
.info {
  flex-direction: row;
  align-items: center;
  padding-left: 30px;

  margin-bottom: 50px;
}
.copy {
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: 9px;
}
.sign {
  flex-direction: row;
  align-items: center;

  height: 80px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;

  border-width: 2px;

  padding-left: 30px;
  padding-right: 30px;
}
.img-tx{
  width: 100px;
  height: 100px;
  border-radius: 100px;
}
.img-sign {
  width: 36px;
  height: 36px;
  margin-right: 20px;
}

/************* VPI */
.vip {
  flex-direction: row;
  align-items: center;
  height: 140px;
  border-radius: 24px;

  padding-left: 30px;
  padding-right: 30px;

  margin-left: 30px;  
  margin-right: 30px;
  margin-bottom: 42px;
}
.but-buy{
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 60px;

  padding-left: 26px;
  padding-right: 26px;

  margin-left: 20px;
}
.color-bhui{
  background-color: #C57C17;
}
.color-qblan{
  background-color: #DEE7FF;
}
.color-qbhui{
  background-color: #FFDEB4;
}
.color-hui{
  color: #C57C17;
}
.color-lan{
  color: #4d97ff;
}
.img-vip{
  position:absolute;
  width: 690px;
  height: 140px;
  left: 0;
  top: 0;
}

/************* 菜单 */
.menu {
  flex-direction: row;
  justify-content: space-between;

  padding-left: 40px;
  padding-right: 40px;

  margin-bottom: 54px;
}
.but-menu{
  align-items: center;
  width: 136px;
  padding: 10px;
}
.img-menu{
  width: 80px;
  height: 68px;
  margin-bottom: 14px;
}
.tag {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 20px;

  top: 6;
  right: 6;
}

/************* 列表 */
.cell {
  flex-direction: row;
  align-items: center;
  height: 90px;

  padding-left: 40px;
  padding-right: 40px;

  margin-bottom: 14px;
}
.img-cell {
  width: 32px;
  height: 32px;

  margin-right: 32px;
}
.img-arrow {
  width: 16px;
  height: 26px;
}
</style>